<template>
    <el-container>
        <PageHeader/>
        <el-container>
            <el-main>
                <Banner :bannerData="bannerData" :height="'480px'"/>
                <div class="content">
                    <div class="main">
                        <el-row class="toTradePage">
                            <ToTradeBtn/>
                        </el-row>
                        <el-row class="sideBtn">
                            <SideBtn/>
                        </el-row>
                        <TransactionCount class="transactionCount" :data="orderCount" :noticeData="websiteNotice"/>
                        <el-row class="list">
                            <div class="bill_list common_shadow commcon_padding">
                                <el-row class="block_title">
                                    <span class="title_icon"></span>
                                    <span class="title_text">票据列表</span>
                                    <el-button type="primary" plain size="mini" @click="publishBill" class="toMainPage">
                                        <i class="iconfont icon-fabu"></i> 发布票据
                                    </el-button>
                                    <a href="market.html">
                                        <el-button type="text" size="mini" class="more_btn">查看更多</el-button>
                                    </a>
                                </el-row>
                                <el-row class="restDay" v-if="isRestDay">
                                    <el-row class="outter">
                                        <el-row class="middle_inner">
                                            <p>未开市</p>
                                            <p>
                                                <i class="iconfont icon-shijian hpx-red-tips"></i> 开市时间:
                                                <span class="time">正常工作日<span class="detailTime">(08:00-21:00)</span></span>
                                            </p>
                                        </el-row>
                                    </el-row>
                                </el-row>
                                <el-row v-if="!isRestDay">
                                    <el-table
                                        :data="tableData.body"
                                        style="width: 100%">
                                        <el-table-column
                                            prop="bill_product_create_time"
                                            label="发布时间"
                                            :formatter="formatterDate">
                                        </el-table-column>
                                        <el-table-column
                                            prop="acceptor_name"
                                            label="承兑人"
                                            width="230px"
                                            class-name="accept">
                                            <template slot-scope="scope">
                                                <div>
                                                    <span class="bill_source">
                                                        <i class="iconfont icon-caipiao hpx-link" v-if="scope.row.acceptor_type_id == 407"></i>
                                                        <i class="iconfont icon-shangpiao hpx-red-tips" v-if="scope.row.acceptor_type_id == 408"></i>
                                                    </span>
                                                    <span>{{ formatterAcceptor(scope.row.acceptor_name,10) }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="bill_sum_price"
                                            label="票面金额(万)"
                                            :formatter="formatterPrice">
                                        </el-table-column>
                                        <el-table-column
                                            prop="bill_deadline_time_format"
                                            label="到期时间"
                                            width="160px">
                                        </el-table-column>
                                        <el-table-column
                                            poop="bill_flaw_names"
                                            label="背书瑕疵">
                                            <template slot-scope="scope">
                                                <div :class="{'hpx-red-tips':scope.row.bill_flaw_ids != '1500'}">
                                                    {{ formatterFlaw(scope.row.bill_flaw_names.join(',')) }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="bill_every_plus"
                                            label="每十万扣">
                                            <template slot-scope="scope">
                                                <div class="hpx-red-tips">
                                                    {{ scope.row.bidding_mode == 3210 ? '一口价' + scope.row.billEveryPlus + '元' : (scope.row.billEveryPlus && scope.row.billEveryPlus != 0 ? '竞价' + scope.row.billEveryPlus + '元' : '竞价') }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <!-- <el-table-column
                                            prop="endorsementTimeAVG"
                                            label="平均背书时长">
                                        </el-table-column> -->
                                        <el-table-column
                                            label="操作">
                                            <template slot-scope="scope">
                                                <div v-if="!userInfo || userInfo && scope.row.drawer_id != userInfo.enterprise_id">
                                                    <el-button type="primary" 
                                                        size="small"
                                                        v-if="scope.row.bill_status_code == 801"
                                                        @click="toBidding(scope.row)">
                                                        我要买
                                                    </el-button>
                                                    <span v-if="scope.row.bill_status_code >= 804 && scope.row.bill_status_code < 810">交易中</span>
                                                    <span v-if="scope.row.bill_status_code >= 810" size="small" class="hpx-success">交易完成</span>
                                                    <el-button type="text" size="small" v-if="scope.row.bill_status_code == 801" @click="addBillCar(scope.row.bill_product_id)">
                                                        <i class="iconfont icon-goupiaoche"></i>
                                                    </el-button>
                                                </div>
                                                <div v-if="userInfo && scope.row.drawer_id == userInfo.enterprise_id">
                                                    自己的票
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-row>
                            </div>
                        </el-row>
                        <el-row class="list">
                            <el-col class="offer_list common_shadow commcon_padding">
                                <el-row class="block_title">
                                    <span class="title_icon"></span>
                                    <span class="title_text">报价列表</span>
                                    <a href="tools.html#/pcc">
                                        <el-button type="primary" plain size="mini" class="toMainPage">
                                            <i class="iconfont icon-piaochacha"></i> 更多报价去票查查
                                        </el-button>
                                    </a>
                                </el-row>
                                <!-- <el-table
                                    :data="pccData.body">
                                    <el-table-column
                                        prop="offerTime"
                                        label="报价时间">
                                    </el-table-column>
                                    <el-table-column
                                        prop="simpleName"
                                        label="报价机构"
                                        width="140px"
                                        class-name="accept">
                                        <template slot-scope="scope">
                                            <span class="bill_source">
                                                <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_1.png" alt="" v-if="scope.row.customerStatus == 2">
                                                <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_2.png" alt="" v-if="scope.row.customerStatus == 1">
                                                <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_3.png" alt="" v-if="scope.row.customerStatus == 0">
                                            </span>
                                            <span>{{ formatterAcceptor(scope.row.simpleName,6) }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="billSumPrice"
                                        label="票面金额"
                                        width="130px">
                                    </el-table-column>
                                    <el-table-column
                                        prop="billRate"
                                        label="加价利率">
                                        <template slot-scope="scope">
                                            <div>
                                                {{ scope.row.outUsage != 1 ? scope.row.billRate + '%+' + scope.row.billEveryPlus : '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="acceptorTypeName"
                                        label="承兑机构">
                                        <template slot-scope="scope">
                                            {{ formatterAcceptor(scope.row.acceptorTypeName,6) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="contactPhone"
                                        label="联系人手机号"
                                        width="120px">
                                    </el-table-column>
                                    <el-table-column
                                        label="操作">
                                        <template slot-scope="scope">
                                            <el-button type="primary" plain size="mini" @click="toPcc(scope)">
                                                详情
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table> -->
                                <el-row class="offer">
                                    <el-row class="tableHeader">
                                        <ul>
                                            <li>
                                                <span>报价时间</span>
                                                <span>报价机构</span>
                                                <span>票面金额</span>
                                                <span>加价利率</span>
                                                <span>承兑机构</span>
                                                <span>联系人手机号</span>
                                                <span>操作</span>
                                            </li>
                                        </ul>
                                    </el-row>
                                    <el-row class="seamless-warp">
                                        <ul class="item" :style="{'marginTop': defaultOption.marginTop + 'px'}" @mouseenter="start" @mouseleave="stop">
                                            <li v-for="(item,index) in lists" :key="index">
                                                <span>{{item.offerTime}}</span>
                                                <span>
                                                    <i class="bill_source">
                                                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_1.png" alt="" v-if="item.customerStatus == 2">
                                                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_2.png" alt="" v-if="item.customerStatus == 1">
                                                        <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_3.png" alt="" v-if="item.customerStatus == 0">
                                                    </i> 
                                                     {{ formatterAcceptor(item.simpleName,6) }}
                                                </span>
                                                <span>{{item.billSumPrice}}</span>
                                                <!-- outUsage  0 行口  1 货款 -->
                                                <span>{{ item.outUsage == 0 ? (item.billRate + '%' + (item.billEveryPlus != 0 ? '+' + item.billEveryPlus : '')) : '每十万扣'+item.billEveryPlus }}</span>
                                                <span>{{ formatterAcceptor(item.acceptorTypeName,6) }}</span>
                                                <span>{{ item.contactPhone }}</span>
                                                <span>
                                                    <el-button type="primary" plain size="mini" @click="toPcc(index)">详情</el-button>
                                                </span>
                                            </li>
                                        </ul>
                                    </el-row>
                                </el-row>
                            </el-col>
                            <el-col class="grade_block common_shadow">
                                <el-row class="grade_title">
                                    <el-row class="block_title">
                                        <span class="title_text">新手指引</span>
                                        <a href="/guide/suppor/" target="_blank">
                                            <el-button type="text" size="mini" class="more_btn">
                                                了解更多
                                            </el-button>
                                        </a>
                                    </el-row>
                                </el-row>
                                <div class="grade_content">
                                    <el-row class="grade_row">
                                        <el-col :span="9" class="coverPhoto">
                                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/34e62edf-945f-4485-a0b8-3bb49993a0d0.png" alt="">
                                        </el-col>
                                        <el-col :span="15">
                                            <el-row class="grade_link">
                                                <a href="/guide/video/" target="_blank">
                                                    平台(视频)操作流程 <i class="iconfont icon-gengduo"></i>
                                                </a>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                    <el-row class="grade_row">
                                        <el-col :span="9" class="coverPhoto">
                                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/b9f78a06-a6c7-4535-85b6-8a5d99adcccc.png" alt="">
                                        </el-col>
                                        <el-col :span="15">
                                            <el-row class="grade_link">
                                                <a href="/guide/suppor/" target="_blank">
                                                    平台(图文)操作流程 <i class="iconfont icon-gengduo"></i>
                                                </a>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                    <el-row class="grade_row">
                                        <el-col :span="9" class="coverPhoto">
                                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/1378f845-ad66-4810-8bed-2658cc35a3e0.png" alt="">
                                        </el-col>
                                        <el-col :span="15">
                                            <el-row class="grade_link">
                                                <a href="/guide/animate_video/" target="_blank">
                                                    一部(动画)带您了解汇票线 <i class="iconfont icon-gengduo"></i>
                                                </a>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="list partner">
                            <el-row class="block_title">
                                <span>合作伙伴</span>
                            </el-row>
                            <el-row class="partner_logos">
                                <el-col v-for="item in partnerLogos" :key="item">
                                    <img :src="item" alt="合作伙伴">
                                </el-col>
                            </el-row>
                        </el-row>
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-footer>
            <PageFooter/>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import PageHeader from '@component/common/PageHeader.vue';
    import PageFooter from '@component/common/PageFooter.vue';
    import Banner from '@component/common/Banner.vue';
    import TransactionCount from '@component/common/TransactionCount.vue';
    import Table from '@component/common/HpxTable.vue'
    import moment from 'moment' 
    import { ellipsis } from '@/util/format'
    import ToTradeBtn from '@/component/common/ToTradeBtn.vue'
    import SideBtn from '@/component/common/SideBtn.vue'
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    // import Scroll from 'vue-seamless-scroll';
    import calc from 'calculatorjs'
    @Component({
        components: {
            PageHeader,
            PageFooter,
            Banner,
            TransactionCount,
            Table,
            ToTradeBtn,
            SideBtn,
            // Scroll
        },
        methods: {
            ...mapActions([
                'getMessageNumber',
                'getAllTips'
            ])
        }
    })
    export default class Index extends Vue {
        userInfo:any = {}
        isLogin = false
        //请求票源数据定时器
        timer:any = null
        //报价信息数据
        lists = []
        //报价信息滚动参数
        defaultOption = {
            marginTop: 0,  //步长
            waitTime: 40 //等待间隔
        }
        //报价信息滚动定时器
        scrollTimer:any = null
        //banner数据
        bannerData = [{
                picture: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/banner/banner2.jpg',
            },{
                picture: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/banner/banner3.jpg',
            },{
                picture: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/banner/banner4.jpg',
            },{
                picture: 'https://hpx-pc.oss-cn-beijing.aliyuncs.com/banner/banner5.jpg',
        }]
        //网站公告
        websiteNotice:any = []
        //交易笔数等信息
        orderCount = {}
        //票据信息
        tableData:TableData = {
            header:[
                {
                    label: '发布时间',
                    key: 'bill_product_create_time',
                    formatter: (row:any) => moment(row.bill_product_create_time).format('MM-DD HH:MM')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name, '...', 10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price',
                    formatter: (row:any) => calc.div(row.bill_sum_price,10000)
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time_format'
                },
                {
                    label: '背书瑕疵',
                    key: 'bill_flaw_names'
                },
                {
                    label: '每十万扣',
                    key: 'bill_every_plus',
                    formatter: (row:any) => row.bidding_mode == 3210 ? '一口价' + row.bill_every_plus + '元' : '竞价'
                },
                // {
                //     label: '平均背书时长',
                //     key: 'endorsementTimeAVG'
                // }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //是否休息
        isRestDay = false
        //报价信息
        pccData = {
            header: [{
                    label: '报价时间',
                    key: 'offerTime'
                },
                {
                    label: '报价机构',
                    key: 'simpleName'
                },
                {
                    label: '每十万扣',
                    key: 'discountAmount',
                    formatter: (row:any) => row.discountAmount > 0 ? row.discountAmount : '--'
                },
                {
                    label: '票面金额',
                    key: 'billSumPrice'
                },
                {
                    label: '加价利率',
                    key: 'billRate',
                    formatter: (row:any) => row.outUsage != 1 ? row.billRate + '%+' + row.billEveryPlus : '--'
                },
                {
                    label: '承兑机构',
                    key: 'acceptorTypeName'
                },
                {
                    label: '联系人手机号',
                    key: 'contactPhone'
            }],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }
        }
        //合作伙伴
        partnerLogos = [
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner1.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner2.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner3.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner4.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner5.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner6.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner7.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner8.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner9.png",
            "https://hpx-pc.oss-cn-beijing.aliyuncs.com/partner/partner10.png"
        ]
    //methods
        //获取轮播图
        async getBanners () {
            let res = await this.$http.get('newsBanner/queryNewsBanner')
            if(res.status == 200 && res.data){
                this.bannerData = res.data
            }
        }
        //获取交易信息
        async getTradeCount () {
            let res = await this.$http.get('orders/orderCount')
            if(res.status == 200){
                this.orderCount = res.data
            }
        }
        //获取网站公告
        async getWebsiteNotice () {
            let res = await this.$http.get('websiteNotice/queryWebsiteNotice')
            if(res.status == 200 && res.data){
                this.websiteNotice = res.data
            }
        }
        //发布票据
        publishBill () {
            if(!this.isLogin){
                window.location.href = 'user.html#/?back=market.html'
                return false
            }
            this.getAccountStatus()
        }
        //查询执剑人账户,判断是否可以发票
        async getAccountStatus () {
            let params = {
                customerId1: this.userInfo.customer_id,
                enterpriseId: this.userInfo.enterprise_id
            }
            let res = await this.$http.get('customerInfoStatus/queryCustomerInfoStatus',{params})
            if(res.status == 200 && res.data && res.data.accountBinding == 2){
                window.location.href = 'trade.html#/seller/posted/1/0'
            }else{
                this.$confirm('请先完成账户绑定操作','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box'
                }).then(()=>{
                    window.location.href = 'trade.html'
                }).catch(()=>{})
            }
        }
        //获取票源信息
        async getBillList () {
            let params = {
                n: 10,
                p: 1,
                bill_type_id: '',
                func: 'home' 
            }
            let res = await this.$http.get('bills/billProduct/list',{params})
            if(res.status == 200){
                this.tableData.body = res.data.listName
            }else if(res.status == 230){
                this.isRestDay = true
            }
        }
        //获取票查查数据
        async getPccData () {
            let form = {
                acceptorType: '',
                billFlaw: '',
                billSumPrice: '',
                deadlineDays: '',
                LoanAndEntrance: '',
                orderBy: "-offerTime",
                n: 10,
                p: 1
            }
            let res = await this.$http.post('pcc/pc/getPccBillOfferListPC',form)
            if(res.status == 200){
                this.pccData.body = res.data.listName
                this.scrollTop()
            }
        }
        //数据滚动函数
        scrollTop () {
            if(this.pccData.body.length <= 5) {this.lists = this.pccData.body; return false}
            this.lists.push(...this.pccData.body,...this.pccData.body)
            this.sport()
        }
        //运动
        sport () {
            if(this.pccData.body.length <= 5) return false
            let height = this.pccData.body.length*50
            this.scrollTimer = setInterval(()=>{
                this.defaultOption.marginTop-=1
                if(Math.abs(this.defaultOption.marginTop) >= height){
                    this.defaultOption.marginTop = 0
                }
            },this.defaultOption.waitTime)
        }
        //停止
        start () {
            if(this.scrollTimer) clearInterval(this.scrollTimer)
        }
        //开始
        stop () {
            this.sport()
        }
        //把第一条数据放到最后
        mvItem () {
            setInterval(()=>{
                if(Math.abs(this.defaultOption.marginTop) >= 100){
                    let firstItem = this.pccData.body.shift()
                    this.pccData.body.push(firstItem)
                }
            },1000)
        }
        //我要买
        toBidding (obj) {
            if(!this.isLogin){
                window.location.href = 'user.html#/?back=index.html'
                return false
            }else{
                if(obj.drawer_id == this.userInfo.enterprise_id){
                    window.location.href = 'trade.html#/seller/myBill/detail/'+obj.bill_id
                }else{
                    window.location.href = 'trade.html#/buyer/myBidding/detail/'+obj.bill_product_id
                }
            }
        }
        //添加购票车
        async addBillCar (id) {
            if(!this.isLogin){
                window.location.href = 'user.html#/?back=index.html'
                return false
            }
            let billCar = {
                bill_product_id: id
            }
            let res = await this.$http.post(`bills/billCar`,billCar)
            if(res.status == 200){
                this.$alert(res.msg,'加入购票车',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                this.getAllTips()
            }
        }
        toPcc (index) {
            if(index > this.pccData.body.length-1){
                index-=this.pccData.body.length
            }
            window.location.href="tools.html#/pcc/"+index
        }
        //格式化
        formatterDate (row) {
            return moment(row.bill_product_create_time).format('MM-DD HH:mm')
        }
        formatterAcceptor (prop:string,number:number = 10) {
            return ellipsis(prop, '...', number)
        }
        formatterPrice (row) {
            return (calc.div(row.bill_sum_price,10000)).toFixed(2)
        }
        formatterFlaw (prop) {
            return ellipsis(prop,'...',8)
        }
        //是否显示去“我的交易”
        // showOrHide (isShow:boolean) {
        //     console.log(isShow)
        //     this.isShow = isShow
        // }
        created() {
            let userinfo = localStorage.getItem('userInfo');
            if (userinfo) {
                this.userInfo = JSON.parse(userinfo);
                this.isLogin = true
            }else{
                this.isLogin = false
            }
        }
        
        mounted () {
            this.timer = setInterval(()=>{this.getBillList()},300000)
            this.getBanners()
            this.getWebsiteNotice()
            this.getBillList()
            this.getPccData()
            this.getTradeCount()
            if(this.isLogin){
                this.getMessageNumber();
                this.getAllTips();
            }
        }
        destroyed() {
            clearInterval(this.timer)
            clearInterval(this.scrollTimer)
        }
    }
</script>

<style lang="scss" scoped>
    
    .el-main{
        overflow: inherit;
        padding-top: 96px;
    }
    .content{
        .toTradePage{
            position: fixed;
            top: 50%;
            margin-top: -175px;
            right: 0;
            width: 100px;
            height: 100px;
            z-index: 1000;
        }
        .sideBtn{
            position: fixed;
            top: 50%;
            margin-top: -75px;
            right: 0px;
            z-index: 1000;
        }
        .main{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            padding-top: 165px;
            position: relative;
            .transactionCount{
                position: absolute;
                top: -50px;
                z-index: 999;
                background-color: #fff;
                width: 100%; 
            }
            
            .common_shadow{
                box-shadow:2px 2px 14px rgba(28, 31, 51, 0.15);
                border-radius:8px;
            }
            .commcon_padding{
                padding-top: 12px;
            }
            .list{
                margin-bottom: 60px;
                .restDay{
                    padding: 30px 0;
                    .outter{
                        width: 400px;
                        height: 154px;
                        text-align: center;
                        background-color: $__color-bg-primary;
                        border-radius: 4px;
                        font-size: 16px;
                        color: $__color-label;
                        margin: 30px auto;
                        .middle_inner{
                            margin-top: 40px;
                            p{
                                line-height: 35px;
                            }
                            .time{
                                font-size: 18px;
                                .detailTime{
                                    color: $__color-show;
                                }
                            }
                        }
                    }
                }
                
                .bill_list{
                    .more_btn{
                        margin-right: 30px;
                    }
                    .bill_source{
                        display: inline-block;
                        width: 45px;
                        text-align: right;
                        position: relative;
                        top: 3px;
                        .iconfont{
                            font-size: 22px;
                        }
                    }
                }
                .offer_list{
                    width: 840px;
                    height: 360px;
                    float: left;
                    .bill_source{
                        display: inline-block;
                        width: 24px;
                        float: left;
                        // text-align: left;
                        img{
                            width: 20px;
                            height: 20px;
                            vertical-align: middle;
                        }
                    }
                    .el-table{
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                    }
                    .offer{
                        .tableHeader{
                            ul{
                                margin: 0;
                                padding: 0;
                                li{
                                    height: 50px;
                                    line-height: 50px;
                                    span{
                                        display: inline-block;
                                        width: 13.3%;
                                        height: 50px;
                                        text-align: center;
                                        color: $__color-label;
                                        font-size: 14px;
                                        font-weight: 600;
                                        &:nth-child(2){
                                            width: 124px;
                                            text-align: left;
                                            text-indent: 24px;
                                        }
                                        &:nth-child(3){
                                            width: 130px;
                                        }
                                    }
                                }
                            }
                        }
                        .seamless-warp {
                            height: 250px;
                            overflow: hidden;
                            .item{
                                margin: 0;
                                padding: 0;
                            }
                            li{
                                height: 50px;
                                line-height: 50px;
                                span{
                                    display: inline-block;
                                    width: 13.3%;
                                    height: 50px;
                                    text-align: center;
                                    color: $__color-show;
                                    font-size: 14px;
                                    &:nth-child(2){
                                        width: 124px;
                                        text-align: left;
                                    }
                                    &:nth-child(3){
                                        width: 130px;
                                    }
                                }
                            }
                        }
                    }
                }
                .block_title{
                    height: 48px;
                    line-height: 48px;
                    border-bottom: 1px solid $__color-primary;
                    .title_icon{
                        display: block;
                        float: left;
                        width: 6px;
                        height: 18px;
                        margin: 15px 6px 15px 0;
                        background-color: $__color-primary;
                    }
                    .title_text{
                        display: block;
                        float: left;
                        @extend .hpx-label;
                        @extend .hpx-font-weight;
                        font-size: 18px;
                        margin-right: 40px;
                    }
                    .more_btn{
                        float: right;
                        margin-top: 8px;
                        font-size: 14px;
                        color: $__color-link;
                    }
                    .el-button{
                        .icon-gengduo1:before{
                            font-size: 12px;
                        }
                    }
                    .toMainPage{
                        padding-bottom: 8px;
                        font-size: 14px;
                    }
                }
                .grade_block{
                    width: 320px;
                    float: left;
                    margin-left: 40px;
                    .grade_title{
                        background-color: $__color-bg-unimportance;
                        height: 42px;
                        .block_title{
                            border-bottom: none;
                            padding: 0 12px;
                            height: 42px;
                            line-height: 42px;
                        }
                    }
                    .grade_content{
                        padding: 20px 12px;
                        // box-shadow: 0px 2px 10px $__color-border;
                        border-radius: 4px;
                        .grade_row{
                            background-color: $__color-bg-primary;
                            margin-bottom: 10px;
                            height: 86px;
                            .coverPhoto{
                                height: 100%;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .grade_link{
                                margin: 12px 12px 0 12px;
                                a{
                                    color: $__color-label;
                                    font-size: 14px;
                                    .iconfont{
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                        .grade_row:last-child{
                            margin: 0;
                        }
                    }
                }
            }
            .partner{
                margin-bottom: 40px;
                .block_title{
                    border-bottom: none;
                    border-top: 1px solid $__color-line;
                    width: 502px;
                    margin: 0 auto;
                    margin-top: 27px;
                    position: relative;
                    span{
                        display: block;
                        position: absolute;
                        width: 102px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        color: $__color-label;
                        top: -25px;
                        left: 200px;
                        background-color: #fff;
                    }
                }
                .partner_logos{
                    width: 1140px;
                    margin: 0 auto;
                    .el-col{
                        width: 220px;
                        margin-right: 10px;
                        float: left;
                        margin-bottom: 10px;
                        &:nth-child(5){
                            margin-right: 0;
                        }
                        &:last-child{
                            margin-right: 0;
                        }
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
    // @media screen and(max-width: 1366px){
    //     .main{
    //         width: 96% !important;
    //     }
    // }
</style>
<style lang="scss">
    .list{
        .el-table{
            .accept{
                .cell{
                    text-align: left;
                }
            }
            .is-leaf.accept{
                .cell{
                    padding-left: 60px;
                }
            }
        }
    }
    .offer_list{
        .el-table{
            .is-leaf.accept{
                .cell{
                    padding-left: 34px;
                }
            }
            .el-table__body-wrapper.is-scrolling-none{
                td{
                    border-bottom: none;
                }
            }
            tr{
                background: #fff;
            }
        }
    }
</style>